import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { Ref, useEffect, useRef } from 'react';
import { Button, Space, Spin, message } from 'antd';
import { AssetChangeManageAPI } from '../common/type';
import { getFinishConfig } from './FinishConfig';
import { DescriptionsType } from '@/components/DescriptionsType';
import { CheckCircleOutlined } from '@ant-design/icons';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import Cls from 'classnames';
import moment from 'moment';
import { getFinishService } from '../services/UpdateService';

export const OpenFinishModal: React.FC<AssetChangeManageAPI.IOpenFinishModal> = ({ record, curRes, onClose, reloadManage }) => {
  /** 弹框的ref */
  const updateModalRef: Ref<IOneModalRef> = useRef(null);

  const styleFixCls = 'contract-styfixcls-';

  /** 表单配置 */
  const { config, methods } = getFinishConfig({ record });

  /** 完成接口回调 */
  const finishCallback = (res: any) => {
    if (res && res?.msgFlag) {
      message.success(res?.msg);
      onClose();
      reloadManage();
    } else {
      message.error(res?.msg);
    }
  };

  /** 提交完成接口 */
  const { getFinishLoading, getFinishRun } = getFinishService(finishCallback);

  /** 点击确定 */
  const handleSave = () => {
    config.form.validateFields()?.then((values: any) => {
      values.handleTime = moment(values.handleTime).format('YYYY-MM-DD HH:mm:ss');
      values.newMaintenTime = moment(values.newMaintenTime).format('YYYY-MM-DD HH:mm:ss');
      let obj = { ...record, ...values };
      getFinishRun(obj);
    });
  };

  /** 初始化 */
  useEffect(() => {}, []);

  return (
    <>
      <OneModal
        open={true}
        getContainer={false}
        ref={updateModalRef}
        title={'填写信息'}
        onCancel={onClose}
        width={document.body.clientWidth * 0.65}
        bodyStyle={{
          minHeight: document.body.clientHeight * 0.29,
          padding: 10,
        }}
        // onOk={onSave}
        footer={false}
      >
        <Spin spinning={getFinishLoading}>
          <div className={'apply-update-UpdataIntentBox'}>
            <div className={Cls('tabsBodyInfoDom', `${styleFixCls}updateFormBox`)}>
              <ScrollBarLayout>
                <DescriptionsType config={config} />
              </ScrollBarLayout>
            </div>
            <div className="tabsBodyBottomBtn" style={{ display: 'flex', marginTop: 20, justifyContent: 'center' }}>
              <Space>
                <Button type={'primary'} icon={<CheckCircleOutlined />} onClick={handleSave}>
                  完成
                </Button>
              </Space>
            </div>
          </div>
        </Spin>
      </OneModal>
    </>
  );
};
